<template>
    <div class="breadcrumb" :style="{backgroundColor:type === 'cube' ? '#FFFFFF':backgroundColor}">
        <a-breadcrumb :separator="type === 'cube' ? '':separatorStyle">
            <a-breadcrumb-item v-for="(item, index) in historyRoutes" :key="index">
               <span :class="[type ==='cube' ? 'breadcrumb-item':'breadcrumb-item-normal']" :style="{color:item.path == $route.path ? type === 'cube' ? '#FFFFFF':activeColor:textColor,backgroundColor:item.path == $route.path ? type === 'cube' ? themeColor:itemActiveColor:''}" @click.prevent="handleClick(item)">
                   {{ item.name }}
                   <a-icon v-show="showCloseEach" :type="iconType" @click="handleClose(item,index)"/>
                   <a-icon v-show="!showCloseEach" v-if="historyRoutes.length == 1 ? false:index == historyRoutes.length - 1" :type="iconType" @click="handleClose(item,index)"/>
               </span>
            </a-breadcrumb-item>
        </a-breadcrumb>
    <!--   关闭全部     -->
       <div style="padding: 0 10px" v-if="historyRoutes.length">
           <a-dropdown>
               <a-button class="close-btn" style="margin-left: 8px"> 关闭 <a-icon type="down"/></a-button>
               <a-menu slot="overlay" @click="breadcrumbOption">
                   <a-menu-item key="1">
                       <span>关闭全部</span>
                   </a-menu-item>
                   <a-menu-item key="2">
                       <span>关闭其他</span>
                   </a-menu-item>
               </a-menu>
           </a-dropdown>
       </div>
    </div>
</template>
<script>
export default {
    name: "cubeBreadcrumb",
    props:{
        historyRoutes:{
            type:Array,
            default:()=>[]
        },
        separatorStyle:{
            type:String,
            default:'/'
        },
        type:{
            type:String,
            default:(type)=>{
                if (type){
                    return 'cube'
                }else{
                    return 'normal'
                }
            }
        },
        backgroundColor:{
            type:String,
            default:''
        },
        textColor:{
            type:String,
            default:'#4F4E4EB5'
        },
        activeColor:{
            type:String,
            default:'#2c2b2b'
        },
        itemActiveColor:{
            type:String,
            default:''
        },
        showCloseEach:{
            type:Boolean,
            default:true
        },
        iconType:{
            type:String,
            default:'close'
        },

    },
    computed:{
        themeColor(){
            //获取引入的scss文件中的主题颜色
            const element = document.documentElement; // 获取根元素
            const computedStyle = window.getComputedStyle(element);
            return computedStyle.getPropertyValue('--theme-color')
        },
    },
    methods:{
        handleClick(item) {
            this.$emit('click',item)
        },
        handleClose(item,index) {
            this.$emit('close',item,index)
        },
        breadcrumbOption({key}){
            this.$emit('breadcrumbClose',key)
        },
    }

}
</script>
<style scoped lang="scss">
@import "@/assets/common/commonStyle";
.breadcrumb{
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(0,0,0,.06);
    .breadcrumb-item{
        transition: .5s all;
        cursor: pointer;
        background-color: white;
        line-height: 37px;
        display: inline-block;
        padding:0 20px;
        color: rgba(0, 0, 0, 0.71);
        margin: 1px;
        box-shadow:  0 0 1px 2px rgba(0, 0, 0, 0.07);
        &:hover{
            background-color: $theme-color;
            box-shadow:  0 0 1px 2px rgba(0, 0, 0, 0.07);
            transition: .5s all;
            color: white !important;
        }
    }
    .breadcrumb-item-normal{
        transition: .5s all;
        cursor: pointer;
        line-height: 37px;
        display: inline-block;
        padding:0 20px;
        margin: 1px;
        &:hover{
            transition: .5s all;
        }
    }
}
.close-btn{
    border-color: $theme-color;
    color: $theme-color;
    &:hover{
        border-color: $theme-color;
        color: $theme-color;
    }
    &:focus{
        border-color: $theme-color;
        color: $theme-color;
    }
}
::v-deep .ant-dropdown-menu-item:hover{
    background-color: rgba(5, 176, 137, 0.2);
}
</style>
